<template>
  <div>
    <!-- <van-loading type="spinner" class="load" v-if="loading" /> -->
    <!-- 编辑推荐 -->
    <div class="recommend">
      <apple-title>
        <slot>编辑推荐</slot>
      </apple-title>

      <div class="icon">
        <div v-for="(item, index) in personalist" :key="index" class="item">
          <apple-item :item="item"></apple-item>
        </div>
      </div>
    </div>
    <!-- 最新音乐 -->
    <div class="newMusic">
      <apple-title>
        <slot>最新音乐</slot>
      </apple-title>
      <appleMusic
        :musicList="musicList"
        @musicMessage="musicMessage"
      ></appleMusic>
    </div>
  </div>
</template>

<script>
import appleTitle from "../recommendList/appleTitle.vue";
import appleItem from "../recommendList/appleItem.vue";
import appleMusic from "../recommendList/appleMusic.vue";
export default {
  props: {
    personalist: {
      type: Array,
      default: () => {},
    },
    musicList: {
      type: Array,
      default: () => {},
    },
  },
  components: {
    appleTitle,
    appleItem,
    appleMusic,
  },
  methods: {
    musicMessage(data) {
      this.$emit("musicMessage", data);
    },
  },
};
</script>

<style lang="less" scoped>
.recommend {
  .icon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 33%;
    }
  }
}
</style>

